<!doctype html>
<html  class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>后台登录</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="stylesheet" href="{{asset('home/css/login.css')}}">
        @include('home.public.style')
        @include('home.public.script')
    </head>
<body class="login-bg">
    <div class="login layui-anim layui-anim-up">
        <div class="message">后台管理</div>
        <div id="darkbannerwrap"></div>
        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form method="post" class="layui-form" action="{{url('login/verify')}}">
            {{csrf_field()}}
            <input name="username" id="username" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" >
            <i></i>
            <hr class="hr15">
            <input name="password" id="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input">
            <i></i>
            <hr class="hr15">
            <input name="code" id="code" lay-verify="required" placeholder="验证码"  type="text" class="layui-input" style="width:180px;display: inline;" />
            <img id="imgVcode" src="{{url('login/code')}}" alt="验证码" style="cursor: pointer;" />
            <i></i>
            <hr class="hr15">
            <input value="登录" id="login" disabled="disabled" lay-submit lay-filter="login" style="width:100%;background: grey" type="submit">
            <hr class="hr20" >
        </form>
    </div>

    <script>
//        location.reload();
        //点击图片更换验证码    拼接时间戳
        $("#imgVcode").click(function() {
            $(this).attr('src', "{{url('login/code')}}?d="+Math.random());
        });

        //表单验证
        var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //用户名正则，4到16位（字母，数字，下划线，减号）
        //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
        var pPattern = /^.*(?=.{6,})(?=.*d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

        $("input").focus(function(){
            $(this).css("color","#008DE8");
        })

        $("input").blur(function(){
            $(this).css("color","#555555");

        })
        $("input").bind('input propertychange',function(){
            var u = $("#username").val();
            var p = $("#password").val();
            var c = $("#code").val();
            console.log(c);
            if(u && p && c){
                $("#login").css("background","#189F92");
                $("#login").removeAttr("disabled");
            }
            if(u == "" || p == "" || c == ""){
                $("#login").css("background","grey");
                $("#login").attr("disabled","disabled");
            }
        });

        $("#username").blur(function(){
            var v = $(this).val();
            if(v == ""){
                $(this).next().text("*账号不能为空").css("color","#ff0000");
            }
//            else if(!v.match(uPattern)){
//                $(this).next().text("*账号必须是4到16位由字母，数字，下划线组成").css("color","#ff0000");
//            }
            else{
                $(this).next().remove();
            }
        })

        $("#password").blur(function(){
            var v = $(this).val();
            if(v == ""){
                $(this).next().text("*密码不能为空").css("color","#ff0000");
            }else{
                $(this).next().remove();
            }
        })

        $("#code").blur(function(){
            var v = $(this).val();
            if(v == ""){
                $(this).next().next().text("*验证码码不能为空").css("color","#ff0000");
            }else{
                $(this).next().next().remove();
            }
        })
    </script>
</body>
</html>